import React, { memo } from 'react'
import type { ReactNode } from 'react'
import { HotAlbumWrapper } from './style'
import DjRadioHeader from '@/components/djradio-header'
import { useAppSelector, shallowEqualApp } from '@/store'
import AlbumItem from '@/components/album-item'

interface IProps {
  children?: ReactNode
}

const HotAlbum: React.FC<IProps> = () => {
  const { hotAlbumList } = useAppSelector(
    (state) => ({
      hotAlbumList: state.album.hotAlbums
    }),
    shallowEqualApp
  )
  return (
    <HotAlbumWrapper>
      <DjRadioHeader title="热门专碟" />
      <div className="album-list">
        {hotAlbumList.slice(0, 10).map((item, index) => {
          return <AlbumItem key={item.id} itemData={item} size={"130px"} bgp={"-845px"} width={"165px"} />
        })}
      </div>
    </HotAlbumWrapper>
  )
}

export default memo(HotAlbum)
